<template>
  <div class="header">
    <h2 @click="$router.push('/')" style="cursor:pointer;">杭州校区问卷管理</h2>
    <div style="display:flex;">
      <div v-show="isShow1" style="display:flex;align-items:center;">
        <a href="javascript:;" class="upload_userinfo" @click="showUnSubmitStudentInfo">未提交学生信息</a>
        <a href="javascript:;" class="upload_userinfo" @click="showDetail">查看详细信息</a>
      </div>
      <div v-show="isShow" style="display:flex;">
        <a href="javascript:;" class="upload_userinfo" @click="importExcel">上传学员信息</a>
        <input type="file" style="display:none;" ref="fileInput" @change="fileChange($event)">
        <a href="javascript:;" class="logout" @click="logout">退出</a>
      </div>
      <!-- <div class="upload-box" @click="importExcel()">
        <p class="upload-btn">
          <input type="file" ref="fileInput" @change="fileChange($event)" style="display: none">
          <span>{{ excelFileName || '上传学员信息' }}</span>
        </p>
      </div> -->
    </div>
    <!-- <template>
      <span @click="uploadStudents()">上传学员信息</span>
      <div class="upload-box" @click="importExcel()">
        <p class="upload-btn">
          <input type="file" ref="fileInput" @change="fileChange($event)" style="display: none">
          <span>{{ excelFileName || '上传学员信息' }}</span>
        </p>
      </div>
    </template>
    <div class="user">
      <span>{{ username }}</span>
      <span @click="logout()">退出</span>
    </div> -->
      <div class="zhezhao" v-show="isShow3 || isShow4" @click="hideFn"></div>
      <div class="fixedUnSubmitStudentInfo" v-show="isShow3">
        <table width="80%" border="1">
          <caption><h3>查看未提交信息</h3></caption>
          <thead>
            <tr>
              <th>学生姓名</th>
              <th>手机号</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in unSubmitList" :key="index">
              <td>{{item.NAME}}</td>
              <td>{{item.phoneNumber}}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="fixedUnSubmitStudentInfo" v-show="isShow4">
        <table width="80%" border="1">
          <caption><h3>查看详细信息</h3></caption>
          <thead>
            <tr>
              <th v-for="(item,index) in questionsList" :key="index">
                {{item}}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in studentAnswerList" :key="index">
              <td v-for="(item1,index1) in item" :key="index1">
                {{item1}}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
  </div>
</template>


<script>
  import {logout,uploadPaper} from '../api'
  import storage, { TOKEN_KEY }from '../public/js/storage.js'
  import axios from 'axios'
  export default {
    name: 'Header',
    data() {
      return {
        excelFile: null,
        excelFileName: '',
        isShow:false,
        isShow1:false,
        isShow3:false,
        isShow4:false,
        unSubmitList:[],
        questionsList:[],
        studentAnswerList:[]
      }
    },
    mounted(){
      // console.log('mounted')
      this.initShow()
    },
    watch:{
      '$route':function(){
        this.initShow()
        this.initShow1()
      }
    },
    methods: {
      showDetail(){
        axios.get('http://localhost/qs/student/answerDetail',{params:{id:this.$route.query.id}}).then(res=>{
          console.log(res)
          this.questionsList = res.data.data.questions
          this.studentAnswerList = res.data.data.answers
        })
        
        this.isShow4 = true
        this.isShow3 = false 
      },
      showUnSubmitStudentInfo(){
        axios.get('http://localhost/qs/student/uncommitStudents',{params:{id:this.$route.query.id}}).then(res=>{
          // console.log(res)
          this.unSubmitList = res.data.data 
        })
        
        this.isShow3 = true
        this.isShow4 = false  
      },
      initShow1(){
        if(this.$route.path == '/data'){
          this.isShow1 = true 
        }else{
          this.isShow1 = false 
        }
      },
      initShow(){
        if(storage.get(TOKEN_KEY)){
          this.isShow = true 
        }
      },
      logout() {
        var isConfirm = confirm('确定要退出吗?');
        if(!isConfirm)return
        logout().then(res=>{
          // res.code == 0
          if(true){
            storage.clear()
            this.isShow = false
            this.$router.push('/login')
          }
        })
      },
      importExcel() {
        console.log(233)
        console.log(this.$refs.fileInput)
        this.$refs.fileInput.click()
      },

      fileChange(event) {
        console.log(123456)
        let excelFile = event.target.files[0]
        let fileSuffix = excelFile.name.split('.').pop()
        if (fileSuffix !== 'xls' && fileSuffix !== 'xlsx') {
          alert('上传文件格式错误')
        } else{
          // this.excelFile = excelFile
          // this.excelFileName = excelFile.name
          // console.dir(excelFile)
          let params = new FormData()
          params.append('file',excelFile)
          uploadPaper(params).then(res=>{
            console.log(res)
            if(res.code == 0){
              alert('上传成功')
              event.target.value = ''
            }else{
              alert(res.msg);
              event.target.value = ''
            }
          })
        }
      },
      hideFn(){
        this.isShow3 = false
        this.isShow4 = false 
      }
    }
  }
</script>

<style lang="scss">
  @import "../style/public.scss";

  .header {
    display: flex;
    justify-content:space-between;
    align-items: center;
    height: 5rem;
    background-color: $orange;
    color: #fff;
    padding-right:10px;
    h2 {
      margin: 0 5rem 0 6rem;
      font-size: 1.8rem;
      margin-left: 20px;
      /*&:before {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        margin-right: .5rem;
        content: "?";
        color: $orange;
        text-align: center;
        background-color: #fff;
        border-radius: 50%;
      }*/
    }

    span {
      margin-right: 50px;
    }
    .upload_userinfo,.logout{
      padding:1rem 3rem;
      color: #000;
      border:1px solid #cce5ff;
      border-radius: 5px;
      background-color: #cce5ff;
      margin:0 10px;
    }
  }
  .zhezhao{
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,.8);
    z-index:400;
  }
  .fixedUnSubmitStudentInfo{
    position: fixed;
    left:20%;
    top:20%;
    right:20%;
    bottom:20%;
    background-color: #fff;
    box-shadow: 0 0 20px #e39952;
    color:#000;
    z-index: 999;
    overflow-y: scroll;
    table{
      margin:30px auto;
      cursor: pointer;
      caption{
        text-align: center;
        h3{
          font-size: 20px;
          font-weight: 700;
          margin-bottom: 10px;
        }
      }
      thead tr{
        background:#f07600;
      }
      th,td{
        padding:10px 0;
        text-align: center;
      }
      tr:nth-child(2n){
        background:#ccc;
      }
      tbody tr:hover{
        background:orange;
      }
    }
  }
  


</style>
